<template>
  <div>
    <h1>视频</h1>
    <div>
      <video
        ref="videoPlayer"
        src="http://localhost:3000/uploads/videos/doupo.mp4"
        width="600"
        height="300"
        controls
      ></video>
    </div>
    <div class="flex">
      <button @click="rate--">-</button>
      <span>{{ rate }}</span>
      <button @click="rate++">+</button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted, watchEffect } from "vue";

const videoPlayer = ref<HTMLVideoElement | null>(null);
const videoUrl = ref("http://localhost:3000/uploads/videos/doupo.mp4");
const rate = ref(1);
const getVideoUrl = async () => {
  try {
    const res = await fetch("http://localhost:3000/api/v1/videos/doupo");
    const data = await res.json();
    return data.data.url;
  } catch (error) {
    console.log(error);
  }
};
// --​​异步代码不会导致后续代码不执行，但会影响依赖收集​
watchEffect(async () => {
  videoUrl.value = await getVideoUrl(); // --有问题的代码，异步代码会导致后续的依赖收集
  if (!videoPlayer.value) return;
  if (rate.value < 0) {
    rate.value = 0;
  }
  videoPlayer.value!.playbackRate = rate.value;
});
onMounted(() => {
  if (!videoPlayer.value) return;
  videoPlayer.value.playbackRate = 2;
});
</script>
